<style>
	.centrar{
		margin:0 auto;
		width:100%;
		padding:2%;
		margin-top:3%;
	}
	.centrar caption{
		background-color:#171616;
		color:white;
		font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
		padding:2.1%;
		width:100%;
	}
	.centrar caption label{
		font-size:1.3em;
	}
	.centrar caption p{
		font-size:1.1em;
	}
	#tlReporte{
		width:80%;
		border:1px solid #c1c2c3;
	}
	.blue{
      background-color: #eee;
    }
    .blank{
      background-color: #fff;
    }
	#nav {
      float: left;
      list-style: none;
	  width:100%;
	  font-size:12px;
	}
   #nav li {
      float: left;
	  border: 1px solid #ccc;  
	  width:20%;
	  padding:1%;
	}
   #nav li a {
      display: block;
      text-decoration: none;
      color: #069;
   }
   #nav li a:hover {
	}
	#nav li:hover{
		background-color:#F7F7F7;
	}
	#dReportContainer{
		display:none;
		padding:2%;
		float:left;
		width:96%;
		margin:0 auto;
		border:1px solid #ccc;
	}
	#dGraficoReportes{
		width:96%;
		}
</style>
<div class="mytabs" id="tabs" style="width:90%;margin: 0 auto;"> 
	<ul> 
		<li><a id="lnkGruposGrid">Grupos</a></li> 
		<li><a id="lnkUsuariosGrid">Usuarios</a></li> 
		<li><a id="lnkReportes">Reportes</a></li> 
	</ul>
</div>	 
<script language="JavaScript">
	var newGrupo;
	var editGrupo;
	var asignarMiembroGrupo;
	var editarAsignacionMiembro;
	var asignarMiembros;
	var removerMiembro
	var delGrupo;
	
	var newUser;
	var detalleUser;
	var editUser;
	var delUser;
	
	var loadSectores;
	var loadSectoresGrupo;
	var st;
	var xuid;
	$(document).ready(function(){
		
		$("#lnkGruposGrid").attr("href",utility.makeUrl("grupos/loadFormGrid"));
		$("#lnkUsuariosGrid").attr("href",utility.makeUrl("users/loadFormGrid"));
		$("#lnkReportes").attr("href",utility.makeUrl("publics/loadFormGrid"));
		
		/*
		 * objetos de grupo
		 */
		asignarMiembros = new OnecoreForms({
			formUrl		:utility.makeUrl("grupos/loadFormAsignarMiembrosGrids"),
			windowModal	:"popup",
			itemName	:"Grupo",
			type		:"load",
			width		:utility.getWidth(0.95),
			height		:utility.getHeight(0.6),
			beforeRender:function(){
				$(".ajaxlink").attr("href","javascript:void(0);");
				$("#tUsuariosAsignar").flexigrid({
					url: utility.makeUrl('users/loadGrid'),
					dataType: 'json',
					colModel : [
						{display: 'id', name : 'user.id', width : 10,hide:true},
						{display: 'Rut', name : 'user.rut', width : 50, sortable : true, align: 'left'},
						{display: 'Nombre1', name : 'user.nombre1', width :40, sortable : true, align: 'left'},
						{display: 'Nombre2', name : 'user.nombre2', width : 40, sortable : true, align: 'left'},
						{display: 'Apellido1', name : 'user.apellido1', width :40, sortable : true, align: 'left'},
						{display: 'Apellido2', name : 'user.apellido2', width : 40, sortable : true, align: 'left'},
						{display: 'Sexo', name : 'user.sexo', width : 20, sortable : true, align: 'left'},
						{display: 'Iglesia', name : 'iglesia.nombre', width : 10, sortable : true, align: 'left', hide:true},
						{display: 'Dirección', name : 'user.direccion', width : 100, sortable : true, align: 'left'},
						{display: 'Fono Fijo', name : 'user.fono_fijo', width : 50, sortable : true, align: 'left'},
						{display: 'Fono Móvil', name : 'user.fono_movil', width : 50, sortable : true, align: 'left'},
						{display: 'Email', name : 'user.email', width : 100, sortable : true, align: 'left'}
					],
					searchitems : [
						{display: 'Nombre1', name : 'user.nombre1',isdefault: true},
						{display: 'Nombre2', name : 'user.nombre2'},
						{display: 'Apellido1', name : 'user.apellido1'},
						{display: 'Apellido2', name : 'user.apellido2'},
						{display: 'Rut', name : 'user.rut'},
						{display: 'Sexo', name : 'user.sexo'},
						{display: 'Fono fijo', name : 'user.fono_fijo'},
						{display: 'Fono móvil', name : 'user.fono_movil'},
						{display: 'Email', name : 'user.email'},
						{display: 'Dirección', name : 'user.direccion'},
						{display: 'Iglesia', name : 'iglesia.nombre'}
					],
					sortname: "apellido1",
					sortorder: "asc",
					usepager: true,
					title: 'Miembros Ministerio Gracia y Paz',
					useRp: true,
					rp: 10,
					showTableToggleBtn: true,
					width: utility.getWidth(0.42),
					height: utility.getHeight(0.3),
					pagestat: '',
					procmsg: 'Procesando, espere...',
					nomsg: 'Sin items',
					singleSelect: true
				});
				$("#tUsuariosMiembros").flexigrid({
					url: utility.makeUrl('grupos/loadGridMiembrosGrupo'),
					dataType: 'json',
					colModel : [
						{display: 'id', name : 'user.id', width : 5,hide:true},
						{display: 'Rol', name : 'tiporol.nombre', width :40, sortable : true, align: 'left'},
						{display: 'Nombre1', name : 'user.nombre1', width :60, sortable : true, align: 'left'},
						{display: 'Nombre2', name : 'user.nombre2', width : 60, sortable : true, align: 'left'},
						{display: 'Apellido1', name : 'user.apellido1', width :60, sortable : true, align: 'left'},
						{display: 'Apellido2', name : 'user.apellido2', width : 60, sortable : true, align: 'left'},
						{display: 'Fono Fijo', name : 'user.fono_fijo', width : 40, sortable : true, align: 'left'},
						{display: 'Fono Móvil', name : 'user.fono_movil', width : 40, sortable : true, align: 'left'},
						{display: 'Email', name : 'user.email', width : 80, sortable : true, align: 'left'},
						{display: 'Inscrito', name : 'user.created', width : 50, sortable : true, align: 'left'}
					],
					searchitems : [
						{display: 'Nombre1', name : 'user.nombre1',isdefault: true},
						{display: 'Nombre2', name : 'user.nombre2'},
						{display: 'Apellido1', name : 'user.apellido1'},
						{display: 'Apellido2', name : 'user.apellido2'},
						{display: 'Fono fijo', name : 'user.fono_fijo'},
						{display: 'Fono móvil', name : 'user.fono_movil'},
						{display: 'Email', name : 'user.email'}
					],
					sortname: "apellido1",
					sortorder: "asc",
					usepager: true,
					title: $("#hdiNombreGrupo").val(),
					useRp: true,
					rp: 10,
					showTableToggleBtn: true,
					width: utility.getWidth(0.42),
					height: utility.getHeight(0.3),
					pagestat: '',
					procmsg: 'Procesando, espere...',
					nomsg: 'Sin items',
					params : [
			    			{name: 'gid', value: $("#hdiIdGrupo").val()},
			  		],
					singleSelect: true
				});
				$("#lnkAsignarMiembroGrupo").click(function(){
					uid = $("#tUsuariosAsignar .trSelected div").html();
					gid = $("#hdiIdGrupo").val();
					asignarMiembroGrupo.afterSuccess = function(){$("#tUsuariosMiembros").flexReload();};
					asignarMiembroGrupo.setAjaxData("uid="+uid+"&gid="+gid);
					asignarMiembroGrupo.customLoad();
				});
				$("#lnkRemoverMiembroGrupo").click(function(){
					var gid = $("#hdiIdGrupo").val();
					var uid = $("#tUsuariosMiembros .trSelected div").html();
					removerMiembro.setAjaxData("gid="+gid+"&uid="+uid);
					removerMiembro.del();
				});
				$("#lnkDetalleMiembroGrupo").click(function(){
					id = $("#tUsuariosMiembros .trSelected div").html();
					xuid = id;
					detalleUser.load(id);
				});
				$("#lnkEditarAsignacion").click(function(){
					var gid = $("#hdiIdGrupo").val();
					var uid = $("#tUsuariosMiembros .trSelected div").html();
					id = $("#tUsuariosMiembros .trSelected div").html();
					editarAsignacionMiembro.setAjaxData("uid="+uid+"&gid="+gid);
					editarAsignacionMiembro.upd();
				});
			}
		});
		loadSectoresGrupo = new OnecoreForms({
			formUrl		:utility.makeUrl("sectors/loadSectoresByComuna"),
			afterSuccess:function(data){
				var list = data;
				$("#slSectores").html("");
				for(i in list){
					var sector =list[i].Sector;
					$("#slSectores").append("<option value='"+sector.id+"'>"+sector.nombre+"</option>");
				}
			}	
		});
		newGrupo = new OnecoreForms({
			formUrl		:utility.makeUrl("grupos/loadFormNuevoGrupo"),
			windowModal	:"popup",
			itemName	:"Grupo",
			type		:"add",
			formId		:"fNuevoGrupo",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				asignarMiembros.load(response.data); //aqui cargamos la vista para asignar gente
			},
			beforeRender:function(response){
				$("#slTipoGrupo").change(function(){
					var op = $("#slTipoGrupo option[value='"+this.value+"']").text().trim();
					if(op === "Pre-Encuentro" || op === "Encuentro"|| op === "Post-Encuentro" || op === "Bautizo" || op === "Convención" || op === "Escuela de Lideres" || op === "Escuela de Pastores"|| op === "Re-Encuentro" ||op === "Taller"){
						$("#liFechaGrupo").slideDown("fast");	
					}
					else $("#liFechaGrupo").slideUp("fast");
				});
				$("#slComunas").change(function(){
					loadSectoresGrupo.setAjaxData("id="+$(this).val());
					loadSectoresGrupo.customLoad();
				});
			}
		});
		editGrupo = new OnecoreForms({
			formUrl		:utility.makeUrl("grupos/loadEditForm"),
			windowModal	:"popup",
			itemName	:"Grupo",
			type		:"upd",
			formId		:"fEditarGrupo",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				$("#tGrupos").flexReload();
			},
			beforeRender:function(response){
				$("#slTipoGrupo").change(function(){
					var op = $("#slTipoGrupo option[value='"+this.value+"']").text().trim();
					if(op === "Pre-Encuentro" || op === "Encuentro"|| op === "Post-Encuentro" || op === "Bautizo" || op === "Convención" || op === "Escuela de Lideres" || op === "Escuela de Pastores"|| op === "Re-Encuentro" ||op === "Taller"){
						$("#liFechaGrupo").slideDown("fast");	
					}
					else $("#liFechaGrupo").slideUp("fast");
				});
				$("#slComunas").change(function(){
					loadSectoresGrupo.setAjaxData("id="+$(this).val());
					loadSectoresGrupo.customLoad();
				});
			}
		});
		asignarMiembroGrupo = new OnecoreForms({
			formUrl		:utility.makeUrl("grupos/loadFormAsignarMiembro"),
			formId		:"fAsignarMiembro",
			windowModal	:"popup",
			itemName	:"Asignar Miembro a Grupo",
			type		:"add",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				$("#tUsuariosMiembros").flexReload();
			}
		});
		delGrupo = new OnecoreForms({
			urlAction	:utility.makeUrl("grupos/del"),
			windowModal	:"popup",
			itemName	:"Grupo",
			type		:"del",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				$("#tGrupos").flexReload();
			}
		});
		
		/*
		 * objetos de usuario
		 */
		detalleUser = new OnecoreForms({
			formUrl		:utility.makeUrl("users/loadFormDetalle"),
			windowModal	:"popup",
			itemName	:"User",
			type		:"load",
			width		:utility.getWidth(0.9),
			height		:utility.getHeight(0.7),
			beforeRender:function(){
				$(".ajaxlink").attr("href","javascript:void(0);");
				$(".masInfoGrupo").click(function(){
					var show = $("#"+$(this).attr("grupoid")).attr("show");
					if (show == "true") {
						$("#" + $(this).attr("grupoid")).slideDown("fast");
						$("#"+$(this).attr("grupoid")).attr("show","false");
					}
					else{
						$("#" + $(this).attr("grupoid")).slideUp("fast");
						$("#"+$(this).attr("grupoid")).attr("show","true");
					}	
				});
				$(".editarMiembros").click(function(){
					id = $(this).attr("grupoid");
					asignarMiembros.load(id);
				});
				$(".editarGrupo").click(function(){
					id = $(this).attr("grupoid");
					editGrupo.upd(id);
					editGrupo.afterSuccess = function(){
						detalleUser.load(xuid);
					};
				});
				$(".verArbol").click(function(){
					var show = $(this).attr("show");
					if (show == "true") {
						$("#liDetalleArbol").slideDown("fast");
						$(this).attr("show","false");
					}
					else{
						$("#liDetalleArbol").slideUp("fast");
						$(this).attr("show","true");
					}	
				});
			}
		});
		treeUser = new OnecoreForms({
			formUrl		:utility.makeUrl("users/loadTree"),
			windowModal	:"popup",
			itemName	:"User",
			type		:"load",
			width		:utility.getWidth(0.8),
			height		:utility.getHeight(0.9),
			beforeRender:function(){
				$("#center-container").css("left","0px");
				$("#center-container").css("height","400px");
				//fnVerArbol();
			}
		});
		newUser = new OnecoreForms({
			formUrl		:utility.makeUrl("users/loadFormNuevoUsuario"),
			windowModal	:"popup",
			itemName	:"Usuario",
			type		:"add",
			formId		:"fNuevoUsuario",
			width		:utility.getWidth(0.6),
			beforeRender:function(data){
				$("#slComunas").change(function(){
					loadSectores.setAjaxData("id="+$(this).val());
					loadSectores.customLoad();
				});
				$("#lnkLoadAvatar").click(function(){
					var finderx = new CKFinder();
//					finderx.BasePath = $("#ckfinderPath").val() ;
					finderx.BasePath = "http://localhost/cakephp/webroot/js/ckfinder/ckfinder.html";
					finderx.selectActionFunction = function(url, data){
						$("#imgAvatar").attr("src",url);
						$("#hdiAvatar").val(url);
					};
					finderx.popup() ;
				});
			},
			afterSuccess:function(response){
				$("#tUsuarios").flexReload();
			}
		});
		editUser = new OnecoreForms({
			formUrl		:utility.makeUrl("users/loadEditForm"),
			windowModal	:"popup",
			itemName	:"Usuario",
			type		:"upd",
			formId		:"fEditarUsuario",
			width		:utility.getWidth(0.6),
			beforeRender:function(data){
				$("a").attr("href","javascript:void(0);");
				$("#slComunas").change(function(){
					loadSectores.setAjaxData("id="+$(this).val());
					loadSectores.customLoad();
				});
				$("#lnkLoadAvatar").click(function(){
					var finderx = new CKFinder();
//					finderx.BasePath = $("#ckfinderPath").val() ;
					finderx.BasePath = "http://localhost/sisagyp/webroot/js/ckfinder/ckfinder.html";
					finderx.selectActionFunction = function(url, data){
						$("#imgAvatar").attr("src",url);
						$("#hdiAvatar").val(url);
					};
					finderx.popup() ;
				});
			},
			afterSuccess:function(response){
				$("#tUsuarios").flexReload();
			}
		});
		delUser = new OnecoreForms({
			urlAction	:utility.makeUrl("users/del"),
			windowModal	:"popup",
			itemName	:"Usuario",
			type		:"del",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				$("#tUsuarios").flexReload();
			}
		});
		removerMiembro = new OnecoreForms({
			urlAction	:utility.makeUrl("grupos/removerMiembro"),
			windowModal	:"popup",
			itemName	:"Usuario",
			type		:"del",
			afterSuccess:function(response){
				$("#tUsuariosMiembros").flexReload();
			}
		});
		editarAsignacionMiembro = new OnecoreForms({
			formUrl		:utility.makeUrl("grupos/loadFormEditarAsignarMiembro"),
			formId		:"fAsignarMiembro",
			windowModal	:"popup",
			itemName	:"Editar Miembro a Grupo",
			type		:"upd",
			width		:utility.getWidth(0.4),
			afterSuccess:function(response){
				$("#tUsuariosMiembros").flexReload();
			}
		});
		loadSectores = new OnecoreForms({
			formUrl		:utility.makeUrl("sectors/loadSectoresByComuna"),
			afterSuccess:function(data){
				var list = data;
				$("#slSectores").html("");
				for(i in list){
					var sector =list[i].Sector;
					$("#slSectores").append("<option value='"+sector.id+"'>"+sector.nombre+"</option>");
				}
			}	
		});
		
		$( "#tabs" ).tabs({
			cache:true,
			collapsible: true,
			load: function(event, ui){
				var selected = $( "#tabs" ).tabs( "option", "selected" );
				$(".ajaxlink").attr("href","javascript:void(0);");
				if(selected==0){
					$("#tGrupos").flexigrid({
						url: pub_make_url('grupos/loadGrid'),
						dataType: 'json',
						colModel : [
							{display: 'id', name : 'grupo.id', width : 10,hide:true},
							{display: 'Tipo', name : 'tipogrupo.nombre', width : 70, sortable : true, align: 'left'},
							{display: 'Nombre', name : 'grupo.nombre', width : 70, sortable : true, align: 'left'},
							{display: 'Miembros', name : 'miembros', width : 70, sortable : false, align: 'left'},
							{display: 'Dirección', name : 'grupo.direccion', width :70, sortable : true, align: 'left'},
							{display: 'Día', name : 'grupo.dia_reunion', width : 70, sortable : true, align: 'left'},
							{display: 'Hora', name : 'grupo.hora_reunion', width : 70, sortable : true, align: 'left'},
							{display: 'Fecha ini.', name : 'grupo.fecha_inicio', width : 70, sortable : true, align: 'left'},
							{display: 'Fecha fin.', name : 'grupo.fecha_termino', width : 70, sortable : true, align: 'left'},
							{display: 'Iglesia', name : 'iglesia.nombre', width : 70, sortable : true, align: 'left'},
							{display: 'Creado', name : 'grupo.created', width : 100, sortable : true, align: 'left'},
							{display: 'Modificado', name : 'grupo.modified', width : 100, sortable : true, align: 'left'}
						],
						searchitems : [
							{display: 'Nombre', name : 'grupo.nombre'},
							{display: 'Tipo', name : 'tipogrupo.nombre',isdefault: true},
							{display: 'Dirección', name : 'grupo.direccion'},
							{display: 'Día', name : 'grupo.dia_reunion'},
							{display: 'Hora', name : 'grupo.hora_reunion'},
							{display: 'Fecha inicio', name : 'grupo.fecha_inicio'},
							{display: 'Fecha término', name : 'grupo.fecha_termino'},
							{display: 'Iglesia', name : 'iglesia.nombre'},
							{display: 'Creado', name : 'grupo.created'},
							{display: 'Modificado', name : 'grupo.modified'},
							{display: 'Finalizados', name : 'finalizado'},
							{display: 'Inactivos', name : 'inactivos'}
						],
						sortname: "tipogrupo.nombre",
						sortorder: "asc",
						usepager: true,
						title: 'Grupos de Congregación',
						useRp: true,
						rp: 10,
						showTableToggleBtn: true,
						width: utility.getWidth(0.85),
						height: utility.getHeight(0.25),
						pagestat: '',
						procmsg: 'Procesando, espere...',
						nomsg: 'Sin items',
						singleSelect: true
					});
					$("#lnkNuevoGrupo").click(function(){
						newGrupo.afterSuccess = function(){$("#tGrupos").flexReload();};
						newGrupo.add();
					});
					
					$("#lnkAsignarMiembros").click(function(){
						id = $("#tGrupos .trSelected div").html();
						asignarMiembros.load(id);
					});
					$("#lnkDelGrupo").click(function(){
						id = $("#tGrupos .trSelected div").html();
						delGrupo.afterSuccess = function(){$("#tGrupos").flexReload();};
						delGrupo.del(id);
					});
					$("#lnkEditGrupo").click(function(){
						id = $("#tGrupos .trSelected div").html();
						editGrupo.afterSuccess = function(){$("#tGrupos").flexReload();};
						editGrupo.upd(id);
					});
				}
				else if(selected==1){
					$("#tUsuarios").flexigrid({
						url: utility.makeUrl('users/loadGrid'),
						dataType: 'json',
						colModel : [
							{display: 'id', name : 'user.id', width : 10,hide:true},
							{display: 'Rut', name : 'user.rut', width : 50, sortable : true, align: 'left'},
							{display: 'Nombre1', name : 'user.nombre1', width :50, sortable : true, align: 'left'},
							{display: 'Nombre2', name : 'user.nombre2', width : 50, sortable : true, align: 'left'},
							{display: 'Apellido1', name : 'user.apellido1', width : 50, sortable : true, align: 'left'},
							{display: 'Apellido2', name : 'user.apellido2', width : 50, sortable : true, align: 'left'},
							{display: 'Sexo', name : 'user.sexo', width : 20, sortable : true, align: 'left'},
							{display: 'Iglesia', name : 'iglesia.nombre', width : 80, sortable : true, align: 'left'},
							{display: 'Dirección', name : 'user.direccion', width : 100, sortable : true, align: 'left'},
							{display: 'Sector', name : 'sector.nombre', width : 70, sortable : true, align: 'left'},
							{display: 'Fono Fijo', name : 'user.fono_fijo', width : 50, sortable : true, align: 'left'},
							{display: 'Fono Móvil', name : 'user.fono_movil', width : 50, sortable : true, align: 'left'},
							{display: 'Email', name : 'user.email', width : 100, sortable : true, align: 'left'},
							{display: 'Creado', name : 'user.created', width : 75, sortable : true, align: 'left'},
							{display: 'Modificado', name : 'user.modified', width : 75, sortable : true, align: 'left'}
						],
						searchitems : [
							{display: 'Nombre1', name : 'user.nombre1',isdefault: true},
							{display: 'Nombre2', name : 'user.nombre2'},
							{display: 'Apellido1', name : 'user.apellido1'},
							{display: 'Apellido2', name : 'user.apellido2'},
							{display: 'Rut', name : 'user.rut'},
							{display: 'Sexo', name : 'user.sexo'},
							{display: 'Fono fijo', name : 'user.fono_fijo'},
							{display: 'Fono móvil', name : 'user.fono_movil'},
							{display: 'Email', name : 'user.email'},
							{display: 'Dirección', name : 'user.direccion'},
							{display: 'Sector', name : 'sector.nombre'},
							{display: 'Iglesia', name : 'iglesia.nombre'},
							{display: 'Creado', name : 'user.created'},
							{display: 'Modificado', name : 'user.modified'}
						],
						sortname: "apellido1",
						sortorder: "asc",
						usepager: true,
						title: 'Congregación Ministerio Gracia y Paz',
						useRp: true,
						rp: 10,
						showTableToggleBtn: true,
						width: pub_get_width(0.85),
						height: pub_get_height(0.25),
						pagestat: '',
						procmsg: 'Procesando, espere...',
						nomsg: 'Sin items',
						singleSelect: false
					});
					$("#lnkNuevo").click(function(){
						newUser.afterSuccess = function(){$("#tUsuarios").flexReload();};
						newUser.add();
					});
					$("#lnkDetalle").click(function(){
						var id = $("#tUsuarios .trSelected div").html();
						xuid = id;
						detalleUser.load(id);
					});
					$("#lnkEditUsuario").click(function(){
						id = $("#tUsuarios .trSelected div").html();
						editUser.afterSuccess = function(){$("#tUsuarios").flexReload();};
						editUser.upd(id);
					});
					$("#lnkDelUsuario").click(function(){
						id = $("#tUsuarios .trSelected div").html();
						delUser.afterSuccess = function(){$("#tUsuarios").flexReload();};
						delUser.del(id);
					});
					$("#lnkTree").click(function(){
						var id = $("#tUsuarios .trSelected div").html();
						treeUser.load(id);
					});
				}
				else if(selected==2){
				}
			},
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html("Error de carga" );
				},
				dataFilter: function(result){
		            data = $.parseJSON(result);
					response = data.response;
		            return response.data;
		        }
			}
		});
	});
</script>